<!--
 * @Description:按日期搜索sn
 * @Author: lwx
 * @Date: 2023-03-15 09:09:23
 * @LastEditors: lwx
 * @LastEditTime: 2023-03-15 11:14:01
-->
<template>
   <el-drawer
     title="总码搜索"
     :visible.sync="drawer"
     direction="rtl"
     :before-close="handleClose">
     <div class="drawer-body">
       <el-date-picker
        v-model="date"
        size="small"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
      </el-date-picker>
      <el-button type="success" icon="el-icon-search" size="small" class="ml-2" @click="handleSearch()">查询</el-button>
       <el-table
         v-loading="loading"
         element-loading-text = "正在查找中..."
         element-loading-spinner = "el-icon-loading"
         size="mini"
         border
         :data="SNList"
         style="width:93%;margin-top:15px"
         align="center">
         <el-table-column
           label="总码">
           <template slot-scope="scope">
             {{ scope.row }}
           </template>
         </el-table-column>
         <el-table-column
           label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="toReport(scope.row)">查看报表</el-button>
          </template>
         </el-table-column>
       </el-table>
     </div>
   </el-drawer>
</template>

<script>
import {searchSN} from '@/api/report.js'
export default {
  data () {
    return {
        loading:false,
        date:'',
        SNList:[]
    }
  },
  props:{
    drawer:Boolean
  },
  methods:{
    //查找
    async handleSearch(){
       if(!this.date){
           this.$message.warning('请先选择日期在搜索')
           return
       }
      this.loading=true
      try{
        const {data}= await searchSN(this.date)
        this.SNList=data    
        this.loading = false;
      }catch(e){
        this.loading=false    
      }
    },
    //关闭抽屉
    handleClose(){
     this.$emit('closeDrawer')
    },
    //查看条码
    toReport(SN){
    this.$emit('toReport',SN)
    },
}
}
</script>
<style lang='scss' scoped>
.drawer-body{
    padding: 0 30px;
    font-size: 16px;
}
</style>